import {designPage} from "@peryl/react-compose";
import {Box, Button, i18n, Icon, PageCard, PageCardContent, Space, Step, StepGroup} from "plain-design";
import './result-success-page.scss';

export default designPage(() => {
  return () => (
    <PageCard className="result-success-page">
      <PageCardContent>
        <div className="result-success-page-content">
          <Icon className="result-success-page-icon" icon="pi-check-circle-fill" status="success"/>
          <span className="result-success-page-title">{i18n.$intl('page.resultSuccessPage.title').d('提交成功')}</span>
          <span className="result-success-page-message">{i18n.$intl('page.resultSuccessPage.message').d('提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。')}</span>
          <Space className="result-success-page-button-bar">
            <Button label={i18n.$intl('page.resultSuccessPage.button.back').d('返回上一页')} mode="fill"/>
            <Button label={i18n.$intl('page.resultSuccessPage.button.check').d('查看账单')}/>
            <Button label={i18n.$intl('page.resultSuccessPage.button.print').d('打印账单')}/>
          </Space>
          <Box className="result-success-page-detail padding">
            <div className="result-success-page-detail-form">
              <div>{i18n.$intl('page.resultSuccessPage.transformDetail').d('转账详情')}</div>
              <div>
                <div>
                  <div>{i18n.$intl('page.resultSuccessPage.paymentAccount').d('付款账户')}:</div>
                  <div>@peryl/micro-web</div>
                </div>
                <div>
                  <div>{i18n.$intl('page.resultSuccessPage.receiptAccount').d('收款账户')}:</div>
                  <div>martsforever@peryl.com</div>
                </div>
                <div>
                  <div>{i18n.$intl('page.resultSuccessPage.receiptName').d('收款人名称')}:</div>
                  <div>痞老板很pi</div>
                </div>
                <div>
                  <div>{i18n.$intl('page.resultSuccessPage.receiptAmount').d('收款金额')}:</div>
                  <div>1314 ¥</div>
                </div>
              </div>
            </div>
            <StepGroup dotIcon titleAlignBottom current={1}>
              <Step title={i18n.$intl('page.resultSuccessPage.transformApproval').d("转账申请")} v-slots={{
                content: () => (
                  <div className="step-item-content">
                    <div>
                      <span>@peryl/micro-web</span>
                      <Icon icon="pi-phone"/>
                    </div>
                    <div>2024-06-19</div>
                  </div>
                )
              }}/>
              <Step title={i18n.$intl('page.resultSuccessPage.SupervisorReview').d("主管审核")} v-slots={{
                content: () => (
                  <div className="step-item-content">
                    <div>
                      <span>Supervisor review</span>
                      <Icon icon="pi-phone"/>
                    </div>
                    <div>2024-06-19</div>
                  </div>
                )
              }}/>
              <Step title={i18n.$intl('page.resultSuccessPage.FinancialReview').d("财务审核")} v-slots={{
                content: () => (
                  <div className="step-item-content">
                    <div>
                      <span>Financial review</span>
                      <Icon icon="pi-phone"/>
                    </div>
                    <div>2024-06-19</div>
                  </div>
                )
              }}/>
              <Step title={i18n.$intl('page.resultSuccessPage.FinancialPayment').d("财务打款")} v-slots={{
                content: () => (
                  <div className="step-item-content">
                    <div>
                      <span>Financial payment</span>
                      <Icon icon="pi-phone"/>
                    </div>
                    <div>2024-06-19</div>
                  </div>
                )
              }}/>
            </StepGroup>
          </Box>
        </div>
      </PageCardContent>
    </PageCard>
  );
});
